<template>
  <div>
    <h2>订单管理</h2>
    <el-tabs v-model="activeName" @tab-click="handleClick">
      <el-tab-pane label="全部订单" name="-1"></el-tab-pane>
      <el-tab-pane label="普通订单" name="0"></el-tab-pane>
      <el-tab-pane label="拼团订单" name="1"></el-tab-pane>
      <el-tab-pane label="秒杀订单" name="fourth"></el-tab-pane>
    </el-tabs>
    <div class="main">
      <div class="order-statu">
        <em>订单状态:</em>
        <el-button :plain="true">成功</el-button>
        <el-button :plain="true">警告</el-button>
        <el-button :plain="true">消息</el-button>
        <el-button :plain="true">错误</el-button>
      </div>
      <div class="pay-method">
        <em>支付方式:</em>
        <el-button :plain="true" @click="getValue(-1)">全部</el-button>
        <el-button :plain="true" @click="getValue(1)">微信支付</el-button>
        <el-button :plain="true" @click="getValue(2)">支付宝支付</el-button>
        <el-button :plain="true" @click="getValue(3)">余额支付</el-button>
        <el-button :plain="true" @click="getValue(4)">线下支付</el-button>
      </div>
      <div class="order-time">
        <div class="left">
          <em>创建时间:</em>
          <input type="date" />
        </div>
        <div class="search">
          <span>搜索:</span>
          <el-input
            placeholder="请输入内容"
            v-model="input3"
            class="input-with-select"
          >
            <el-select v-model="select" slot="prepend" placeholder="请选择">
              <el-option label="全部" value="1"></el-option>
              <el-option label="订单号" value="2"></el-option>
              <el-option label="用户电话" value="3"></el-option>
            </el-select>
            <el-button slot="append" icon="el-icon-search"></el-button>
          </el-input>
        </div>
      </div>

      <div class="order-other">
        <div class="sure">订单核销</div>
        <div class="send">导出</div>
      </div>
    </div>
    <el-table
      ref="multipleTable"
      :data="tableData"
      tooltip-effect="dark"
      style="width: 100%;max-height:400px;overflow:auto"
      @selection-change="handleSelectionChange"
    >
      <el-table-column type="selection"> </el-table-column>
      <el-table-column label="订单号">
        <template slot-scope="scope">{{ scope.row._id }}</template>
      </el-table-column>
      <el-table-column prop="user.nickname" label="用户昵称"> </el-table-column>
      <el-table-column label="商品信息" show-overflow-tooltip>
        <template slot-scope="scope">
          <img
            width="30"
            style="vertical-align: middle"
            :src="scope.row.goods[0].img"
            alt=""
          />
          <span>{{ scope.row.goods[0].title }}</span>
        </template>
      </el-table-column>
      <el-table-column prop="pay.pay_actual" label="实际支付">
      </el-table-column>
      <el-table-column prop="status" label="支付状态">
        <template slot-scope="scope">
          <span>{{ scope.row.status | lookPayStatue }}</span>
        </template>
      </el-table-column>
      <el-table-column prop="pay.pay_time" label="支付时间"> </el-table-column>
      <el-table-column prop="order_type" label="订单状态">
        <template slot-scope="scope">
          <span>{{ scope.row.order_type | lookStatue }}</span>
        </template>
      </el-table-column>
      <el-table-column width="250" label="操作">
        <template slot-scope="scope">
          <el-button size="mini" @click="handleEdit(scope.$index, scope.row)"
            >查询</el-button
          >
          <el-button
            size="mini"
            type="danger"
            @click="handleDelete(scope.$index, scope.row)"
            >删除</el-button
          >
          <el-button size="mini" @click="handleWrite(scope.row._id)"
            >编辑</el-button
          >
        </template>
      </el-table-column>
    </el-table>
    <el-pagination
      @size-change="handleSizeChange"
      @current-change="handleCurrentChange"
      :current-page="currentPage"
      :page-sizes="[3, 6, 9]"
      :page-size="pageSize"
      layout="total, sizes, prev, pager, next, jumper"
      :total="total"
    >
    </el-pagination>
  </div>
</template>

<script>
export default {
  data() {
    return {
      activeName: "-1",
      input1: "",
      input2: "",
      input3: "",
      select: "1",
      tableData: [
        // {
        //   pay: {
        //     pay_actual: 150,
        //     pay_type: 2,
        //     pay_time: "2022-09-09 16:16:19",
        //   },
        //   goods: [
        //     {
        //       img: "http://dummyimage.com/120x240",
        //       price: 199,
        //       title: "修容",
        //       goods_count: 1,
        //     },
        //   ],
        //   _id: "631aef3c213da252b1bd4b9b",
        //   user: {
        //     _id: "62e1e8faead020549d7bf6e5",
        //     nickname: "西西",
        //   },
        //   status: -7,
        //   order_type: 0,
        //   create_time: "2022-09-09 15:46:04",
        // },
      ],
      multipleSelection: [],
      status: "-1",
      currentPage: 1,
      pageSize: 3,
      total: 30,
    };
  },
  methods: {
    handleClick(tab) {
      //  let res=await this.$http.order.findAllOrder({order_type:tab})
      // this.tableData=res.data.data
      // console.log(res.data);
    },
    getValue(val) {
      this.status = val;
    },
    toggleSelection(rows) {
      if (rows) {
        rows.forEach((row) => {
          this.$refs.multipleTable.toggleRowSelection(row);
        });
      } else {
        this.$refs.multipleTable.clearSelection();
      }
    },
    handleSelectionChange(val) {
      this.multipleSelection = val;
      console.log(val);
    },
    handleEdit(index, row) {
      console.log(index, row);
    },
    handleDelete(index, row) {
      console.log(index, row);
    },
    handleWrite(_id) {
      this.$router.push({path:'/home/update',query:{_id}})
    },
    async findAll(data) {
      let elem = {
        page: this.currentPage,
        limit: this.pageSize,
      };
      console.log(data);
      if (data) {
        elem = { ...elem, ...data };
      } else if (this.activeName != -1) {
        elem = { ...elem, order_type: this.activeName };
      }else if(this.status != -1){
        elem = { ...elem, status: this.status };
      }

      const res = await this.$http.order.findAllOrder(elem);
      console.log(res);
      //循环处理数据，每条数据pay_type按照要求修改中文

      this.tableData = res.data.data;
      this.total = res.data.total;
    },
    handleSizeChange(val) {
      console.log("每页显示" + val);
      this.pageSize = val;
      this.findAll();
    },
    handleCurrentChange(val) {
      console.log("当前页码" + val);
      this.currentPage = val;
      this.findAll();
    },
  },
  created() {
    this.findAll();
  },
  watch: {
    activeName(newVal) {
      if (newVal == -1) {
        this.findAll();
      } else {
        let data = { order_type: newVal };
        this.findAll(data);
      }
    },
    status(newVal) {
      if (newVal == -1) {
        this.findAll();
      } else {
        if (this.activeName != -1) {
          let data = { order_type: this.activeName, status: newVal };
          this.findAll(data);
        } else {
          let data = { status: newVal };
          this.findAll(data);
        }
      }
    },
  },
};
</script>

<style lang='scss' scoped>
.main {
  .order-statu {
    margin-bottom: 10px;
    em {
      margin-right: 20px;
    }
  }
  .pay-method {
    margin-bottom: 10px;
    em {
      margin-right: 20px;
    }
  }
  .order-time {
    display: flex;
    .left {
      height: 35px;
      margin-right: 200px;
      em {
        margin-right: 20px;
      }
      input {
        width: 200px;
        height: 100%;
        &::before {
          color: #a9a9a9;
          content: attr(placeholder);
        }
        &.full::before {
          color: black;
          content: "" !important;
        }
      }
    }
    .search {
      width: 50%;
      display: flex;
      span {
        margin-right: 20px;
      }
      .el-select {
        width: 110px;
      }
      .el-input-group__append {
        button {
          background-color: rgb(71, 140, 235) !important;
          color: white;
        }
      }
    }
  }

  .order-other {
    margin-top: 20px;
    display: flex;
    .sure {
      width: 100px;
      height: 50px;
      background-color: green;
      text-align: center;
      line-height: 50px;
      margin-right: 20px;
    }
    .send {
      width: 100px;
      height: 50px;
      background-color: white;
      border: 1px solid gainsboro;
      text-align: center;
      line-height: 50px;
    }
  }
}

.el-select .el-input {
  width: 130px;
}
.input-with-select .el-input-group__prepend {
  background-color: #fff;
}
</style>